import React, { Component,PureComponent } from 'react'
import './index.css'

export default class Parent extends PureComponent {
	state = {carName:"奔驰c36"}

	changeCar = ()=> {
		// this.setState({})
		this.setState({carName:'宝马'})
	}
	// 1.解决了setState但没有改状态还导致render的问题
	// shouldComponentUpdate(nextProps,nextState){
	// 	console.log(this.props,this.state); //目前的props和state
	// 	console.log(nextProps,nextState); //接下要变化的目标props，目标state
	// 	// 比较状态,动态决定是否允许通过
	// 	return !(this.state.carName === nextState.carName)
	// }

	render() {
		console.log('Parent--render');
		const {carName} = this.state	
		const {changeCar} = this
		return (
			<div className="parent">
				<h3>我是Parent组件</h3>
				<span>我的车名字是：{carName}</span><br/>
				<button onClick={changeCar}>点我换车</button>
				{/* <Child/> */}
				{/* <Child name="奥托"/> */}
				<Child carName={carName}/>
			</div>
		)
	}
}

class Child extends PureComponent {
	// 2.解决子组件没有用父组件的任何东西还render的问题
	// shouldComponentUpdate(nextProps,nextState){
	// 	return !(this.props.carName === nextProps.carName)
	// }

	render() {
		console.log('Child--render');
		return (
			<div className="child">
				<h3>我是Child组件</h3>
				{/* <span>我接到的车是：{this.props.carName}</span> */}
			</div>
		)
	}
}
